<template>
  <h1 style="text-align: center">销售统计</h1>
  <div style="display: inline-block;margin: 0 10px">
    <span style="color: #545c64">起始日期：</span>
    <el-date-picker
        v-model="findObj.startDate"
        type="date"
        :size="size"
        placeholder="起始日期"
        value-format="YYYY-MM-DD"
    />
  </div>
  <div style="display: inline-block;margin: 0 10px">
    <span style="color: #545c64">结束日期：</span>
    <el-date-picker
        v-model="findObj.endDate"
        type="date"
        :size="size"
        placeholder="结束日期"
        value-format="YYYY-MM-DD"
    />
  </div>
  <el-button icon="Search" type="primary" @click="create">搜索
  </el-button>
  <div style="margin-top: 20px">
    <div ref="type" style="width: 500px;height: 350px;display: inline-block;margin-top: 50px;margin-left: 50px"></div>
    <div ref="product"
         style="width: 500px;height: 350px;display: inline-block;margin-top: 50px;margin-left: 50px"></div>
  </div>

</template>

<script>
import * as echarts from "echarts";
import axios from "axios";

export default {
  data() {
    return {
      findObj: {},
      productData: [],
      typeData: [],
    }
  },
  methods: {
    countSell() {
      axios.get("/project/stat/findByType", {params: this.findObj}).then(resp => {
        this.productData = resp.data;
        console.log(this.productData);
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(this.$refs.type);
        // 绘制图表
        let option = {
          legend: {
            left: "left"
          },
          title: {
            text: '销售产品统计',
            left: 'center',
            bottom: 'bottom'
          },
          series: [
            {
              type: 'pie',
              data: this.productData,
            }
          ],
          tooltip: {},
        };

        myChart.setOption(option);
      })
    },
    countMonth() {
      axios.get("/project/stat/findByGoods", {params: this.findObj}).then(resp => {
        this.typeData = resp.data;
        console.log(this.typeData);
        let myChart2 = echarts.init(this.$refs.product);
        let option2 = {
          legend: {},
          title: {
            text: '销售类别统计',
            left: 'center',
            bottom: 'bottom'
          },
          series: [
            {
              type: 'pie',
              data: this.typeData,
            }
          ],
          tooltip: {},
        };
        myChart2.setOption(option2);
      });
    },
    create() {
      this.countSell();
      this.countMonth();
    },
  },
  mounted() {
    this.create();
  },
}
</script>

<style scoped>

</style>